<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>商城</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/client/css/main.css" type="text/css" />
	<script>
		//当商品数量发生变化时触发该方法
		function changeProductNum(count, totalCount, id) {
			count = parseInt(count);
			totalCount = parseInt(totalCount);
			//如果数量为0，判断是否要删除商品
			if (count == 0) {
				var flag = window.confirm("确认删除商品吗?");

				if (!flag) {
					count = 1;
				}
			}
			if (count > totalCount) {
				alert("已达到商品最大购买量");
				count = totalCount;
			}
			location.href = "${pageContext.request.contextPath}/ChangeCartServlet?id=" + id + "&count=" + count;
		}
		//删除购物车中的商品
		function cart_del() {
			var msg = "您确定要删除该商品吗？";
			if (confirm(msg)==true){
				return true;
			}else{
				return false;
			}
		}


		function changeNum(i){
			// 获取购买数量
			var numEl = document.getElementById("num");
			// 获取库存数量
			var pnumEl = document.getElementById("pnum");
			// 获取单价
			var priceEl = document.getElementById("price");

			// 格式化为数值类型
			var num = numEl.value;
			num = parseInt(num);

			var pnum = pnumEl.innerText;
			pnum = parseInt(pnum);

			var price = priceEl.innerText;
			price = parseFloat(price);

			if(i==0){
				if(num==1){
					alert("购买数量最少为1")
				}else{
					// 给购买数量做减法
					num=num-1;
					numEl.value=num;
					// 给库存做加法
					pnum = pnum+1;
					pnumEl.innerText=pnum;
				}
			}else{
				if(pnum==0){
					alert("库存不足")
				}else{
					// 给购买数量做加法
					num=num+1;
					numEl.value=num;
					// 给库存做减法
					pnum = pnum-1;
					pnumEl.innerText = pnum;
				}
			}
			document.getElementById('totalPrice').innerText = price*num;
			document.getElementById('total').innerText = price*num;
		}

	</script>
</head>
<body class="main">
<jsp:include page="head.jsp" />
<jsp:include page="menu_search.jsp" />
<div id="divpagecontent">
	<table width="100%" border="0" cellspacing="0">
		<tr>
			<td>
				<div style="text-align:right; margin:5px 10px 5px 0px">
					<a href="${pageContext.request.contextPath }/ToClientIndexServlet">首页</a>
					&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;购物车
				</div>
				<table cellspacing="0" class="infocontent">
					<tr>
						<td>
							<img src="${pageContext.request.contextPath}/resources/images/top_bg.jpg" width="900" height="89" />
							<table width="100%" border="0" cellspacing="0">
								<tr>
									<td>
										<table cellspacing="1" class="carttable">
											<tr>
												<td width="10%">序号</td>
												<td width="30%">商品名称</td>
												<td width="10%">价格</td>
												<td width="20%">数量</td>
												<td width="10%">库存</td>
												<td width="10%">小计</td>
												<td width="10%">取消</td>
											</tr>
										</table>
										<!-- 循环输出商品信息 -->
										<c:set var="total" value="0" />
										<%--											<c:forEach items="${cart}" var="entry" varStatus="vs">--%>
										<table width="100%" border="0" cellspacing="0">
											<tr>
												<td width="10%">1</td>
												<td width="30%">${product.name }</td>
												<td width="10%"><em id="price">${product.price }</em></td>
												<td width="20%">
													<!-- 减少商品数量 -->
													<input type="button" value='-' style="width:20px" onclick="changeNum(0)">
													<!-- 商品数量显示 -->
													<input id="num" name="text" type="text" value="1" style="width:40px;text-align:center" readonly/>
													<!-- 增加商品数量 -->
													<input type="button" value='+' style="width:20px" onclick="changeNum(1)">
												</td>

												<td width="10%"><em id="pnum">${product.pnum-1}</em></td>
												<td width="10%"><em id="totalPrice">${product.price}</em></td>
												<td width="10%">
													<!-- 删除商品 -->
													<a href="${pageContext.request.contextPath}/ChangeCartServlet?id=${product.id}&count=0" style="color:#FF0000; font-weight:bold" onclick="javascript:return cart_del()">X</a>
												</td>
											</tr>
										</table>
										<%--												<c:set value="${total+entry.key.price*entry.value}" var="total" />--%>
										<%--											</c:forEach>--%>

										<table cellspacing="1" class="carttable">
											<tr>
												<td style="text-align:right; padding-right:40px;">
													<font style="color:#FF6600; font-weight:bold">合计：&nbsp;&nbsp;<em id="total">${product.price}</em>元</font>
												</td>
											</tr>
										</table>
										<div style="text-align:right; margin-top:10px">
											<!--继续购物 -->
											<a href="${pageContext.request.contextPath}/ToClientIndexServlet">
												<img src="${pageContext.request.contextPath}/resources/client/images/gwc_jx.gif" border="0" />
											</a>
											&nbsp;&nbsp;&nbsp;&nbsp;
											<!--结账 -->
											<a href="${pageContext.request.contextPath}/ToPayServlet">
												<img src="${pageContext.request.contextPath}/resources/client/images/gwc_buy.gif" border="0" />
											</a>
										</div>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</div>
<jsp:include page="foot.jsp" />
</body>
</html>
